<!--  线 + 柱混合图 -->
<template>
    <el-card>
        <template #header>
            <div class="title">
                业绩柱状图
                <el-tooltip
                    effect="dark"
                    content="点击试试下载"
                    placement="bottom"
                >
                    <i-ep-download class="download" @click="downloadEchart" />
                </el-tooltip>
            </div>
        </template>

        <div :id="id" :class="className" :style="{ height, width }"></div>
    </el-card>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
// store
// state
const chart = ref<any>('')
const props = defineProps({
    id: {
        type: String,
        default: 'barChart',
    },
    className: {
        type: String,
        default: '',
    },
    width: {
        type: String,
        default: '200px',
        required: true,
    },
    height: {
        type: String,
        default: '200px',
        required: true,
    },
})
const options = {
    grid: {
        left: '2%',
        right: '2%',
        bottom: '10%',
        containLabel: true,
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999',
            },
        },
    },
    legend: {
        x: 'center',
        y: 'bottom',
        data: ['收入', '毛利润', '收入增长率', '利润增长率'],
        textStyle: {
            color: '#999',
        },
    },
    xAxis: [
        {
            type: 'category',
            data: ['浙江', '北京', '上海', '广东', '深圳'],
            axisPointer: {
                type: 'shadow',
            },
        },
    ],
    yAxis: [
        {
            type: 'value',
            min: 0,
            max: 10000,
            interval: 2000,
            axisLabel: {
                formatter: '{value} ',
            },
        },
        {
            type: 'value',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: '{value}%',
            },
        },
    ],
    series: [
        {
            name: '收入',
            type: 'bar',
            data: [7000, 7100, 7200, 7300, 7400],
            barWidth: 20,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' },
                ]),
            },
        },
        {
            name: '毛利润',
            type: 'bar',
            data: [8000, 8200, 8400, 8600, 8800],
            barWidth: 20,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#25d73c' },
                    { offset: 0.5, color: '#1bc23d' },
                    { offset: 1, color: '#179e61' },
                ]),
            },
        },
        {
            name: '收入增长率',
            type: 'line',
            yAxisIndex: 1,
            data: [60, 65, 70, 75, 80],
            itemStyle: {
                color: '#67C23A',
            },
        },
        {
            name: '利润增长率',
            type: 'line',
            yAxisIndex: 1,
            data: [70, 75, 80, 85, 90],
            itemStyle: {
                color: '#409EFF',
            },
        },
    ],
}
// action
const downloadEchart = () => {
    // 获取画布图表地址信息
    const img = new Image()
    img.src = chart.value.getDataURL({
        type: 'png',
        pixelRatio: 1,
        backgroundColor: '#fff',
    })
    // 当图片加载完成后，生成 URL 并下载
    img.onload = () => {
        const canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        const ctx = canvas.getContext('2d')
        if (ctx) {
            ctx.drawImage(img, 0, 0, img.width, img.height)
            const link = document.createElement('a')
            link.download = `业绩柱状图.png`
            link.href = canvas.toDataURL('image/png', 0.9)
            document.body.appendChild(link)
            link.click()
            link.remove()
        }
    }
}
// 生命周期
onMounted(() => {
    // 图表初始化
    chart.value = markRaw(
        echarts.init(document.getElementById(props.id) as HTMLDivElement)
    )

    chart.value.setOption(options)

    // 大小自适应
    window.addEventListener('resize', () => {
        chart.value.resize()
    })
})
onActivated(() => {
    if (chart.value) {
        chart.value.resize()
    }
})
</script>

<style scoped></style>
